faire fonctionner jquery et le panneau réductible SPRY une bonne fois pour toute

**arnaudlimit** · 01/09/2008, 23h21

Salut tous le monde,

je suis nouveau sur le site et vous êtes mon dernier espoir de faire fonctionner le script jFlow pour jquery sur ma page (en coordination avec le Panneau Réductible Spry de Dreamweaver..) Ayez pitié pour le peu de cheveux qu'il me reste sur le caillou..

Ce que j'essaie de faire : mes liens du menu sont dans des panneaux réductibles Spry. Lorsque le panneau est ouvert et que l'on clique sur un lien le texte de la page doit glisser jusqu'à sa position finale à la manière d'un slide..

Le script que j'utilise est à télécharger ici.
Il fonctionne avec la Librairie JQuery

J'ai fais un test reproduisant l'architecture de ma page et celui-ci fonctionne !! Voici le code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
 
</style>
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="javascript" type="text/javascript" src="jquery-1.2.3.min.js"></script>
<script language="javascript" type="text/javascript" src="jquery.flow.1.0.js"></script>
<script src="SpryAssets/SpryCollapsiblePanel.js" type="text/javascript"></script>
 
<script language="javascript">
$(document).ready(function(){
 
	$("#CollapsiblePanel4").jFlow({
		slides: "#mySlides",
		width: "99%",
		height: "200px",
		duration: 400
	});
});
</script>
<title>jFlow Demo</title>
<link href="SpryAssets/SpryCollapsiblePanel.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
 
<div id="all">
  <div id="myController">
    <div id="CollapsiblePanel4" class="CollapsiblePanel">
      <div class="CollapsiblePanelTab" tabindex="0">Onglet</div>
      <div class="CollapsiblePanelContent">
        <p><span class="jFlowControl">No 1 </span>
        <p><span class="jFlowControl">No 2 </span>
        <p><span class="jFlowControl">No 3 </span>
      	<p><span class="jFlowControl">No 4 </span>
      </div>
    </div>
  </div>
 
 
<div id="contenu">
  <div id="mySlides">
    <div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque venenatis sagittis enim. Maecenas ligula erat, egestas congue, varius nec, sagittis nec, purus. In neque. Curabitur at metus tincidunt dui tristique molestie. Donec porta molestie tortor. Fusce euismod consectetuer sapien. Fusce ac velit. Nunc ut eros vitae magna tristique volutpat. Suspendisse potenti. In placerat varius sem. Nunc quis sem a justo elementum sagittis. Ut rhoncus feugiat libero. In interdum, leo mollis blandit feugiat, ipsum risus luctus odio, sed ultrices justo ipsum imperdiet magna. Suspendisse rhoncus ullamcorper mauris.    </div>
    <div>Second Slide </div>
    <div>Third Slide </div>
    <div>Fourth Slide </div>
  </div>
</div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<span class="jFlowPrev">Prev</span> <span class="jFlowNext">Next</span>
 
</div>
 
<script type="text/javascript">
<!--
var CollapsiblePanel4 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel4");
//-->
</script>
</body>
</html>

Le souci c'est quand j'essaie de réitérer l'exploit avec ma propre page.. Rien ne se passe ! Voici le code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
<!-- TemplateBeginEditable name="doctitle" -->
<title>Mes massages thérapeutiques</title>
<!-- TemplateEndEditable -->
 
<!-- lien vers la feuille de style web.css-->
<link href="../pages/web.css" rel="stylesheet" type="text/css"/>
 
<!-- lien vers la feuille de style pour les panneaux réductibles du menu-->
<link href="../SpryAssets/SpryCollapsiblePanel.css" rel="stylesheet" type="text/css" />
 
<style>
 
*{outline:none;}
 
.Style4 {color: #FEECD6}
 
 
</style>
 
<!-- script pour l'animation du menu (element spry : panneaux réductible)-->
<script src="../SpryAssets/SpryCollapsiblePanel.js" type="text/javascript"></script>
 
<!-- script pour le slider contenu -->
<script language="javascript" type="text/javascript" src="jquery-1.2.3.min.js"></script>
<script language="javascript" type="text/javascript" src="jquery.flow.1.0.js"></script>
 
<!-- script pour slider de contenu -->
<script language="javascript">
$(document).ready(function(){
 
	$("#CollapsiblePanel4").jFlow({
		slides: "#mySlides",
		width: "99%",
		height: "200px",
		duration: 400
	});
});
</script>
 
<!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable -->
 
 
</head>
 
<body>
 
<div id="page">
  <div id="titre"></div>
  <div id="contenu">
 
		<div id="menu">
 
          <div id="CollapsiblePanel2" class="CollapsiblePanel">
             <a href="../index.html"><div class="CollapsiblePanelTab"></div></a>
          </div>
 
           <div id="CollapsiblePanel3" class="CollapsiblePanel">
             <div class="CollapsiblePanelTab" tabindex="0">
             </div>
             <div class="CollapsiblePanelContent">
                <p class="Style4">Mon approche</p>
                <p class="Style4">Mon parcours</p>
             </div>
           </div>
 
            <div id="CollapsiblePanel4" class="CollapsiblePanel">
              <div class="CollapsiblePanelTab" tabindex="0"></div>
              <div class="CollapsiblePanelContent">
                <p><span class=".jFlowControl">Classique </span>
                <p><span class=".jFlowControl">Thérapeutique </span>
                <p><span class=".jFlowControl">Sportif </span>
                <p><span class=".jFlowControl">Drainage lymphatique </span>
                <p><span class=".jFlowControl">Réflexologie </span>
                <p><span class=".jFlowControl">Tuina </span>
              </div>
            </div>
 
 
            <div id="CollapsiblePanel5" class="CollapsiblePanel">
              <a href="tarifs.html"><div class="CollapsiblePanelTab" tabindex="0"></div></a>
          </div>
 
            <div id="CollapsiblePanel6" class="CollapsiblePanel">
              <a href="reservation.html"><div class="CollapsiblePanelTab" tabindex="0"></div></a>
          </div>
 
            <div id="CollapsiblePanel7" class="CollapsiblePanel">
              <div class="CollapsiblePanelTab" tabindex="0"></div>
              <div class="CollapsiblePanelContent"><br />
              </div>
            </div>
 
       <!-- script inclus dans le body pour l'animation du menu (élément srpy)-->
          <script type="text/javascript">
            var CollapsiblePanel2 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel2");
            var CollapsiblePanel3 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel3");
            var CollapsiblePanel4 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel4");
            var CollapsiblePanel5 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel5");
            var CollapsiblePanel6 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel6");
            var CollapsiblePanel7 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel7");
            </script>
 
		</div>
 
<!-- TemplateBeginEditable name="slider contenu" -->
		<div id="droite">
      		<div id="mySlides">
              	<div>First Slide </div>
   				<div>Second Slide </div>
   				<div>Third Slide </div>
  				<div>Fourth Slide </div>
                <div>Fifth Slide </div>
                <span class="jFlowPrev">Prev </span> <span class="jFlowNext">Next </span>
            </div>
        </div>
<!-- TemplateEndEditable -->
 
<!-- TemplateBeginEditable name="photo contenu ronde" -->
	<img src="../Images/photo_magique_vero.png" alt="photo Véronique Leu" name="photoveronique" width="217" height="216" class="image_ronde" id="photoveronique" /><!-- TemplateEndEditable -->
  </div>
 
	<div id="pied"><img src="../Images/Layer-21.png" alt="Promotion 11ème massage gratuit" name="promotion" width="166" height="122" id="promotion" /><img src="../Images/Layer-18.png" alt="téléchargez la brochure " name="brochure" width="196" height="121" id="brochure" /><img src="../Images/Layer-15.png" alt="Bon cadeau" name="boncadeau" width="263" height="123" id="boncadeau" /></div>
	</div>
 
</body>
</html>

S'il vous plaît : est-ce qu'une âme charitable pourrait me venir en aide ? Je ne vois vraiment pas ce qui cloche dans mon code..

PS. j'ai copier exactement les même fichier "jquery.flow.1.0.js" et "jquery-1.2.3.min.js". La seule chose qui me semble être différent sont les CSS des deux pages. Mais peut-être que je me trompe ?

**le_chomeur** · 02/09/2008, 12h03

as tu une erreur en retour ?

**arnaudlimit** · 02/09/2008, 19h18

Salut Le_chomeur ! ET merci de te pencher sur mon cas..

pour répondre à ta question : non, malheureusement je n'ai pas de message d'erreur. J'ai dû réinstaller Firebug sur la nouvelle version de Firefox, mais il ne me génère aucun commentaire..

Aurais-tu déjà une idée d'où ca pourrait provenir ? Tu as pu comparer les deux codes ? Ca te sembles logique ?

**arnaudlimit** · 02/09/2008, 19h22

Au fait, si t'as un moment ce soir, on pourrait se retrouver pour un "chat" ce sera plus rapide.. Qu'en penses-tu ? Moi, je suis dispo toute la soirée.. Sinon, demain à partir de 14h.

**arnaudlimit** · 03/09/2008, 15h15

Salut à tous !

malheureusement pas de nouvelle de mon sauveur potentiel alias "le_chomeur", donc si l'un(e) d'entre vous veut bien se pencher sur mon problème, j'en serai ravi (d'autant que je dois rendre le projet à la fin de la semaine et que je suis méga coincé !!)

Merci d'avance..

faire fonctionner jquery et le panneau réductible SPRY une bonne fois pour toute

jQuery

Discussions similaires

Partager

Partager